<!--
 * @Description: 底部第一个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 19:58:10
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Heatmap } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadHot() {
      fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/heatmap.json")
        .then((res) => res.json())
        .then((data) => {
          const heatmapPlot = new Heatmap(this.$refs['container'],
            {
              data,
              type: "density",
              xField: "g",
              yField: "l",
              colorField: "tmp",
              color:
                "#F51D27-#FA541C-#FF8C12-#FFC838-#FAFFA8-#80FF73-#12CCCC-#1890FF-#6E32C2",
              legend: {
                position: "bottom",
              },
              annotations: [
                {
                  type: "image",
                  start: ["min", "max"],
                  end: ["max", "min"],
                  src: "https://gw.alipayobjects.com/zos/rmsportal/NeUTMwKtPcPxIFNTWZOZ.png",
                },
              ],
            }
          );
          heatmapPlot.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadHot()
  },
};
</script>
<style scoped>
</style>